<template>
  <div class="container">
    <!-- 顶部 -->
    <div class="topss">
      <a @click="$router.go(-2)" class="back">
        <i></i>
      </a>

      <div class="titles">支付订单</div>

      <div class="change"></div>
    </div>

    <!-- 支付金额 -->
    <div class="money">
      <h6>￥<span class="span">{{ shopData.price }}</span></h6>
      <h5>{{ shopData.title }}</h5>
    </div>

    <!-- 选择支付方式 -->
    <div class="title">
      <h6>选择支付方式</h6>

      <div class="choose">

        <div class="first">

          <h6>支付宝支付</h6><input type="radio" name="money" checked>
        </div>

        <div class="second">

          <h6>微信支付</h6><input type="radio" name="money">
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <footer>

      <!-- <div class="box" @click="buynow">确认支付</div> -->

      <van-cell is-link @click="showPopup">确认支付</van-cell>
      <van-popup v-model="show">
        <div class="inside2">
          <h5>支付提示</h5>
          <h6>是否支付</h6>
          <div class="choose">
            <div class="left" @click="sub">取消</div>
            <div class="right" @click="add">确定</div>
          </div>
        </div>
      </van-popup>

    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      shopData: null,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    sub() {
      this.show = false;
    },
    add(){
      this.$emit("add",this.shopData)
      this.show = false;
      this.$toast("支付成功")
      setTimeout(() => {
        this.$router.push({
          path:'/myorder',
          query:{
            shopData:this.shopData,
            num:2
          }
        })
        window.localStorage.setItem("shopData",JSON.stringify(this.shopData),"num")

      }, 1000);
    }
  },
  created() {
    console.log(this.$route.query.NumData);
    this.shopData = this.$route.query.NumData
  }

};
</script>

<style lang="scss" scoped>
@import "../assets/css/base.css";

.container {
  .topss {
    padding: 0px 15px;
    display: flex;
    align-items: center;

    // background-color: #f5f6fa;
    .back {
      width: 6%;
      height: 52px;
      background-image: url(../assets/img/left.png);
      background-repeat: no-repeat;
      background-size: 50%;
      background-position: 0px 15px;
    }

    .titles {
      flex: 1;
      height: 52px;
      line-height: 52px;
      text-align: center;
      font-size: 17px;
      font-weight: bolder;
    }

    .change {
      font-size: 17px;
      color: #212530;
      height: 52px;
      line-height: 52px;
    }
  }
}

.money {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 9px;

  h5 {

    width: 100px;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space: nowrap;
  }
}

.money h6 {
  height: 48px;
  line-height: 48px;
}

.money h6 span {
  font-size: 25px;

}

.money h5 {
  color: #8a8c91;
  font-weight: 400;
}

h6,
h5,
h4,
h3 {
  margin: 0px;
}

.title>h6 {
  display: flex;
  padding: 0px 15px;
  font-size: 12px;
  color: #8a8c91;
  margin-top: 11px;
  height: 41px;
  line-height: 41px;
  font-weight: normal;
}

.title .choose {
  color: #4e413c;
  display: flex;
  flex-direction: column;
}

.title .choose .first,
.title .choose .second {
  display: flex;
  justify-content: space-between;
  height: 52px;
  line-height: 52px;
  align-items: center;
  padding-left: 50px;
  padding-right: 15px;
  position: relative;
}

.title .choose .first::after {
  display: block;
  content: "";
  width: 25px;
  height: 25px;
  background-image: url(../assets/img/zhifubao.png);
  background-size: 25px 25px;
  position: absolute;
  left: 15px;
}

.title .choose .second::after {
  display: block;
  content: "";
  width: 25px;
  height: 25px;
  background-image: url(../assets/img/wat.png);
  background-size: 25px 25px;
  position: absolute;
  left: 15px;
}

.title .choose .first h6,
.title .choose .second h6 {
  font-size: 15px;
  font-weight: normal;
  flex: 1;
}

.title .choose .first {
  border-bottom: 1px solid #f3f3f3;
}

.title .choose .first input,
.title .choose .second input {
  width: 20px;
  height: 20px;

}

.container {
  height: 667px;
}

footer {
  position: sticky;
  top: 667px;

  height: 66px;
  box-shadow: 0 -3px 3px 0px #d2d3d4;
  background-color: #ffffff;
  padding: 0px 15px;
  display: flex;
  align-items: center;
}

footer .box {
  height: 40px;
  line-height: 40px;
  flex: 1;
  text-align: center;
  border-radius: 3px;
  background-color: #fc5e3b;
  color: #fff2fa;
}

::v-deep i.van-icon-arrow {
  display: none;
}

::v-deep .van-cell {
  padding: 0px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 3px;
  background-color: #fc5e3b;

}

::v-deep .van-cell__value--alone {
  color: #fff2fa;
  text-align: center;
}

.inside2 {
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 140px;
  border-radius: 3px;
  align-items: center;
  padding-top: 8px;
}

.inside2 h5 {
  font-size: 18px;
  color: #141414;
  height: 40px;
  line-height: 40px;

}

.inside2 h6 {
  color: #bebebe;
  height: 40px;
  line-height: 40px;
  margin-bottom: 14px;

}

.inside2>.choose {
  display: flex;
  height: 43px;
  border-top: 1px solid #e3e3e3;
  align-items: center;
  width: 100%;
}

.inside2>.choose .left {
  flex: 1;
  text-align: center;
  height: 43px;
  line-height: 43px;
  border-right: 1px solid #e3e3e3;
}

.inside2>.choose .right {
  flex: 1;
  height: 43px;
  line-height: 43px;
  text-align: center;
  color: #2da7fb;
}
</style>